<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ include file="/mb/jsp/common.jsp" %>

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>排行</title>
</head>
<body ontouchstart="" class="h100 of">
    <div class="detailTop pf w100 of">
	    <div class="w100 of tc cf f18">
	        <span class="pa" style="left: 2px;" onclick="javascript:history.back();"><img src="mb/images/top_back_white.png" style="margin-top: 4px;height: 40px;width: 40px;"/></span>
			排行
	    </div>
	</div>

    <div class="container jz mgt45">
        <section id="num1Big" class="withdrawBack w100 of" style="height:205px;">
            
        </section>
        
     
      
      <!-- table-wrap -->
       <section id="table-wrap-ranking" class="table-wrap-ranking jz bcf of mgt10 br4 pr" style="width:96%;overflow-y: auto;padding-top:46px;">
      		<div id="tbHead" class="tbHead f16 c3 w100 bcf pf" style="top:260px;left:2%;z-index:2;width:96%;">
	            <table style="width: 100%;">
	                <tr>
	                    <th id="th1">
	                     	<div class="pr tc"> <img src="mb/images/ranking-lable.png" class="pa wauto" style="left:0;top: -4px;height:30px">用户</div>
		                 </th>
		                 <th id="th2"  style="padding:0 3%;">
		                     <div class="tc">活跃值</div>
		                 </th>
		                 <th style="padding:0 1%;">
		                     <div class="tc">排名</div> 
		                 </th>
	                </tr>
	            </table>
	        </div>
	         <div class="w100 of" style=" overflow-y: scroll;">
	          <table id="tbBody" class="tbBody w100 f16 c3" style="width: calc( 100% + 2px);">
	               
	            </table>
	         </div>
      
      </section>
    
		  <!-- table-wrap end-->

    </div><!--container-->
	</body>
	<script>
	
			var td1Width = "";
			var td2Width = "";
			
			
			
		$(document).ready(function(){
			var height_Table = $(document.body).height()-260; 
			$("#table-wrap-ranking").height(height_Table);
			
			getData();
			
		})
		
		//加载新数据
    function getData() {
        $.ajax({
            url: "LoginServlet",
            data: JSON.stringify({m: 210}),
            type: 'post',
            dataType: 'json',
            contentType: "application/json;charset=utf-8",
            beforeSend: function () {
                showProgressDg();
            },
            success: function (data) {
            
               if (data.state == 1) {
                  showData(data.list);
                } else {
                    // 其他错误弹出提示
                    showToast(data.info);
                }
            },
            error: function (data) {
                showToast(data.info);
            },
            complete: function () {
                closeProgressDg();
            }
        });
    }
    
    
    function showData(list)
    {
    	console.log(list);
    	var htmlStr="";
    	var htmlStrTable="";
    	
    	$.each(list, function(index,obj){      
    		var rank =obj.rank;
    		
    		
    		if(rank == 1){
    		 	htmlStr='<div class="touxiangFist circle pr">'
				                +'<img src="'+getBaseImgUrl(obj.avatar)+'" class="db jz num1Img" >'
				                 +'<img src="mb/images/ranking-Num1.png" class="pa w100 h100 num1Outer">'
				            +'</div>'
				            +'<p class="cf f16 tc w100 mgt10">'+ obj.username +'</p>'
				
				            +'<div class="firstInfo w100 of mgt10">'
				            	+'<p class="f16 cf w100 tc">活跃值：<span class="mgl10 cf f15" style="background:#FA7624;padding:1px 14px;border-radius:16px;">'+obj.prestigevalue+'</span></p>'
				            +'</div>';
				            
				            
				            
	            htmlStrTable +='<tr>'
						      	+'<td id="td1">'
				                    +'<div class="df"> '
				                    	+'<img src="'+getBaseImgUrl(obj.avatar)+'" class="db circle rankListImg" style="border:4px solid #FFF3B1">'
				                    	+'<p>'+ obj.username +'</p>'
				                    +'</div>'
				                +'</td>'
				                +'<td id="td2" style="padding:0 3%;">'
				                    +'<div class="tc" style="color:#ffb109;">'+obj.prestigevalue+'</div>'
				                +'</td>'
				                +'<td  style="padding:0 1%;">'
				                    +'<div class="tc flexCenter"><img src="mb/images/ranking1.png" style="width:25px;"></div>'
				                +'</td>'
			               	+'</tr>';
			               	
    		}else if(rank == 2){
    			 htmlStrTable +='<tr>'
						      	+'<td>'
				                    +'<div class="df"> '
				                    	+'<img src="'+getBaseImgUrl(obj.avatar)+'" class="db circle rankListImg" style="border:4px solid #E5E5E5">'
				                    	+'<p>'+ obj.username +'</p>'
				                    +'</div>'
				                +'</td>'
				                +'<td>'
				                    +'<div class="tc" style="color:#8d8d8d">'+obj.prestigevalue+'</div>'
				                +'</td>'
				                +'<td>'
				                    +'<div class="tc flexCenter"><img src="mb/images/ranking2.png" style="width:25px;"></div>'
				                +'</td>'
			               	+'</tr>';
    			
    		}else if(rank == 3){
    		 	htmlStrTable +='<tr>'
						      	+'<td>'
				                    +'<div class="df"> '
				                    	+'<img src="'+getBaseImgUrl(obj.avatar)+'" class="db circle rankListImg" style="border:4px solid #FDD5C1">'
				                    	+'<p>'+ obj.username +'</p>'
				                    +'</div>'
				                +'</td>'
				                +'<td>'
				                    +'<div class="tc"  style="color:#ff7800">'+obj.prestigevalue+'</div>'
				                +'</td>'
				                +'<td>'
				                    +'<div class="tc flexCenter"><img src="mb/images/ranking3.png" style="width:25px;"></div>'
				                +'</td>'
			               	+'</tr>';
    		}else{
	    		htmlStrTable +='<tr>'
							      	+'<td>'
					                    +'<div class="df"> '
					                    	+'<img src="'+getBaseImgUrl(obj.avatar)+'" class="db circle rankListImg">'
					                    	+'<p>'+ obj.username +'</p>'
					                    +'</div>'
					                +'</td>'
					                +'<td>'
					                    +'<div class="tc">'+obj.prestigevalue+'</div>'
					                +'</td>'
					                +'<td>'
					                    +'<div class="tc flexCenter c9 f17">'+rank+'</div>'
					                +'</td>'
				               	+'</tr>';
    		}
    		
	  	});
	  	
	  	
	  	$("#num1Big").html(htmlStr);
	  	$("#tbBody").html(htmlStrTable);
	  	
	  	 td1Width = $("#td1").width()+1;
		 td2Width = $("#td2").width()+1;
		 
			console.log(td1Width);
			console.log(td2Width);
			$("#th1").width(td1Width);
			$("#th2").width(td2Width);
	 }
    	
	</script>
</html>
